<script setup lang="ts">
import { useDictStore } from '@/stores/dictStore'
import { useUserStore } from '@/stores/userStore'
import http from '@/tools/http'
import type { DataTableColumns } from 'naive-ui'
import { NButton, NDataTable, NDatePicker, NForm, NFormItem, NInput, NPagination, NSelect, NSpace, NTag, useNotification } from 'naive-ui'
import { h, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const dictStore = useDictStore()
const router = useRouter()
const notification = useNotification()

type RowData = {
    userId?: string
    instanceId?: string
    modelId?: string
    modelVersion?: string
    instanceStatus?: string
    formData?: string
    createTime?: string
    endTime?: string
}

const instanceTableColumns: DataTableColumns<RowData> = [
    {
        title: "流程名称",
        key: "instanceName"
    }, {
        title: "流程状态",
        key: "instanceStatus",
        render(rowData: RowData, rowIndex: number) {
            let type: "default" | "primary" | "info" | "success" | "warning" | "error" = "default"
            if (rowData.instanceStatus === "1") {
                type = "info"
            }
            if (rowData.instanceStatus === "2") {
                type = "warning"
            }
            if (rowData.instanceStatus === "3") {
                type = "error"
            }
            if (rowData.instanceStatus === "8") {
                type = "error"
            }
            if (rowData.instanceStatus === "9") {
                type = "primary"
            }
            return h(
                NTag,
                {
                    type: type
                },
                () => dictStore.dictItem("WORKFLOW_RUNTIME_STATUS", rowData.instanceStatus)
            )
        }
    }, {
        title: "开始时间",
        key: "createTime"
    }, {
        title: "结束时间",
        key: "endTime"
    }, {
        title: "操作",
        key: "actions",
        fixed: 'right',
        render(rowData: RowData, rowIndex: number) {
            return h(
                NSpace, null,
                () => [
                    h(
                        NButton,
                        {
                            size: "small",
                            onclick: () => openInstance(rowData)
                        },
                        { default: () => "查看" }
                    )
                ]
            )
        }
    }
]

const instanceData = reactive<any>({
    list: [],
    pageNum: 1,
    pageSize: 10,
    pages: 1,
    total: 0
})

const instanceSearchFormValue = reactive({
    pageNum: 1,
    pageSize: 10,
    instanceName: "",
    instanceStatus: undefined,
    createTimeRange: null
})

onMounted(() => {
    pageInstance()
})

function pageNumChange(pageNum: number) {
    instanceSearchFormValue.pageNum = pageNum
    pageInstance()
}

function pageSizeChange(pageSize: number) {
    instanceSearchFormValue.pageSize = pageSize
    pageInstance()
}

function openInstance(rowData: RowData) {
    router.push({
        name: "workflow-info",
        query: {
            instanceId: rowData.instanceId,
            modelId: rowData.modelId,
            modelVersion: rowData.modelVersion,
            mode: "4"
        }
    })
}

function pageInstance() {
    let start = ""
    let end = ""
    if (instanceSearchFormValue.createTimeRange) {
        start = instanceSearchFormValue.createTimeRange[0]
        end = instanceSearchFormValue.createTimeRange[1]
    }
    const request = {
        pageNum: instanceSearchFormValue.pageNum,
        pageSize: instanceSearchFormValue.pageSize,
        instanceName: instanceSearchFormValue.instanceName,
        instanceStatus: instanceSearchFormValue.instanceStatus,
        createTimeStart: start,
        createTimeEnd: end
    }
    http.post("/workflow/ru/instance/page", request).then(({ data }) => {
        if (data.code === "0") {
            instanceData.pageNum = data.data.pageNum
            instanceData.pageSize = data.data.pageSize
            instanceData.pages = data.data.pages
            instanceData.total = data.data.total
            instanceData.list.length = 0
            for (let i = 0; i < data.data.list.length; i++) {
                instanceData.list.push(data.data.list[i])
            }
        }
    })
}
</script>

<template>
    <div id="flame-container">
        <div class="search">
            <n-form :model="instanceSearchFormValue" inline label-placement="left">
                <n-form-item label="流程名称" path="instanceName">
                    <n-input v-model:value="instanceSearchFormValue.instanceName" placeholder="请输入实例名称" clearable />
                </n-form-item>
                <n-form-item label="流程状态" path="instanceStatus">
                    <n-select style="width:200px" v-model:value="instanceSearchFormValue.instanceStatus"
                        :options="dictStore.dict('WORKFLOW_RUNTIME_STATUS')" clearable />
                </n-form-item>
                <n-form-item label="开始日期">
                    <n-date-picker v-model:formatted-value="instanceSearchFormValue.createTimeRange" type="daterange"
                        placeholder="请选择日期范围" clearable />
                </n-form-item>
                <n-form-item>
                    <n-button attr-type="button" @click="pageInstance()">查询</n-button>
                </n-form-item>
            </n-form>
        </div>
        <div class="btn-group">

            <n-space>
                <n-button attr-type="button" @click="">批量删除</n-button>
                <n-button attr-type="button" @click="pageInstance()">刷新</n-button>
            </n-space>
        </div>
        <div class="data-table">
            <n-data-table :scrollbar-props="{ trigger: 'none' }" style="height:100%" flex-height
                :columns="instanceTableColumns" :data="instanceData.list" :bordered="false" />
        </div>
        <div class="pagination">
            <n-pagination style="float:right" v-model:page="instanceData.pageNum" :page-size="instanceData.pageSize"
                :item-count="instanceData.total" :page-sizes="[5, 10, 30, 50, 100]" :on-update-page="pageNumChange"
                :on-update-page-size="pageSizeChange" show-quick-jumper show-size-picker />
        </div>
    </div>
</template>

<style scoped></style>